<template>
    <div class="common-layout">
        <el-container>
            <el-header>
                <tag>商品列表-普通商品发布</tag>
            </el-header>
            <el-container>
                <el-aside width="200px">
                    <!-- <el-card style="max-width: 480px">
                        <template #header>
                            <div class="card-header">
                                <span>智慧酒店</span>
                            </div>
                        </template>
<div>
    asdfas
    <el-divider />
    适用门店
    <el-divider />
    商品详情<br>
    购买须知
</div>
<template #footer>
                            ￥0.00
                            <el-button type="warning">立即购买</el-button>
                        </template>
</el-card> -->
                </el-aside>
                <el-main>
                    <div>
                        <h3>基本信息</h3>
                        <el-form :model="form" label-width="auto" style="max-width: 600px">
                            <el-form-item label="商品名称">
                                <el-input v-model="form.productName" />
                            </el-form-item>
                            <el-form-item label="商品图片">
                                <el-upload class="avatar-uploader"
                                    action="https://localhost:44388/api/app/pictures/upload-picture"
                                    :show-file-list="false" :on-success="handleAvatarSuccess"
                                    :before-upload="beforeAvatarUpload">
                                    <img v-if="form.productPicture" :src="form.productPicture" class="avatar" />
                                    <el-icon v-else class="avatar-uploader-icon">
                                        <Plus />
                                    </el-icon>
                                </el-upload>
                            </el-form-item>
                            <el-form-item label="商品标签">
                                <el-select v-model="form.productLabel" placeholder="请选择">
                                    <el-option label="string" value="string" />
                                    <el-option label="多少啊" value="多少啊" />
                                    <el-option label="大师傅" value="大师傅" />
                                </el-select>
                            </el-form-item>

                            <el-form-item label="商品简介">
                                <el-input v-model="form.productProfile" type="textarea" />
                            </el-form-item>
                            <el-form-item label="分类设置">
                                <el-select v-model="form.commodityType" placeholder="请选择">
                                    <el-option label="string" value="string" />
                                    <el-option label="stri" value="stri" />
                                </el-select>
                            </el-form-item>
                        </el-form>
                    </div>
                    <div>
                        <h3>价格库存</h3>
                        <el-form :model="form" label-width="auto" style="max-width: 600px">
                            <el-form-item label="销售价">
                                <el-input v-model="form.sellingPrice" />
                            </el-form-item>
                            <el-form-item label="原价">
                                <el-input v-model="form.originalprice" />
                            </el-form-item>
                            <el-form-item label="剩余库存">
                                <el-input v-model="form.surplusStock" />
                            </el-form-item>
                            <el-form-item v-model="Pdata.discount" label="可用折扣">
                                <el-checkbox label="积分" size="large" />
                                <el-checkbox label="余额" size="large" />
                            </el-form-item>
                            <el-form-item v-model="Pdata.favorable" label="可用优惠">
                                <el-checkbox label="会员折扣" size="large" />
                                <el-checkbox label="优惠券" size="large" />
                            </el-form-item>
                        </el-form>
                    </div>
                    <div>
                        <h3>购买须知</h3>
                        <el-form :model="form" label-width="auto" style="max-width: 600px">
                            <el-form-item label="是否限购">
                                <el-input v-model="Pdata.restrict" />
                            </el-form-item>
                            <el-form-item label="赠送好友">
                                <el-checkbox v-model="Pdata.gift" label="用户购买商品后可转赠其他好友" size="large" />
                            </el-form-item>
                            <el-form-item label="其他须知">
                                <el-input v-model="Pdata.noticethat" type="textarea" />
                            </el-form-item>
                        </el-form>
                    </div>
                    <div>
                        <h3>使用须知</h3>
                        <el-form :model="form" label-width="auto" style="max-width: 600px">
                            <el-form-item v-model="Pdata.timelimit" label="使用期限">
                                <el-radio v-model="Pdata.timelimit" value="1" size="large">无限制</el-radio>
                                <el-radio v-model="Pdata.timelimit" value="2" size="large">固定日期</el-radio>
                                <el-radio v-model="Pdata.timelimit" value="3" size="large">购买后</el-radio>
                            </el-form-item>
                            <el-form-item label="可用日期">
                                <el-input v-model="Pdata.date" type="textarea" />
                            </el-form-item>
                            <el-form-item label="可用时间">
                                <el-input v-model="Pdata.time" type="textarea" />
                            </el-form-item>
                            <el-form-item v-model="Pdata.appointment" label="是否预约">
                                <el-radio v-model="Pdata.appointment" value="1" size="large">无需预约</el-radio>
                                <el-radio v-model="Pdata.appointment" value="2" size="large">需要预约</el-radio>
                            </el-form-item>
                            <el-form-item label="其他规则">
                                <el-input v-model="Pdata.rule" type="textarea" />
                            </el-form-item>
                        </el-form>
                    </div>
                    <div>
                        <h3>其他信息</h3>
                        <el-form :model="form" label-width="auto" style="max-width: 600px">
                            <el-form-item label="上架设置">
                                <el-radio v-model="Pdata.listing" value="1" size="large">立即上架</el-radio>
                                <el-radio v-model="Pdata.listing" value="2" size="large">暂不上架</el-radio>
                                <el-radio v-model="Pdata.listing" value="3" size="large">定时上架</el-radio>
                            </el-form-item>
                            <el-form-item label="下架设置">
                                <el-checkbox v-model="Pdata.delist" label="定时下架" size="large" />
                            </el-form-item>
                            <el-form-item label="领取方式">
                                <el-checkbox v-model="Pdata.Drawdown" label="到店" size="large" />
                                <el-checkbox v-model="Pdata.Drawdown" label="邮寄" size="large" />
                            </el-form-item>
                            <el-form-item label="卡券同步">
                                <el-checkbox v-model="Pdata.coupon" label="微信卡包" size="large" />
                            </el-form-item>
                            <el-form-item label="海报标签">
                                <el-input v-model="Pdata.placard" />
                            </el-form-item>
                        </el-form>
                    </div>
                    <div>
                        <h3>分享设置</h3>
                        <el-form :model="form" label-width="auto" style="max-width: 600px">
                            <el-form-item label="分享标题">
                                <el-input v-model="form.shareTitle" />
                            </el-form-item>
                            <el-form-item label="分享描述">
                                <el-input v-model="form.shareDescription" type="textarea" />
                            </el-form-item>
                            <el-form-item label="分享图片">
                                <el-upload class="avatar-uploader"
                                    action="https://localhost:44388/api/app/pictures/upload-picture"
                                    :show-file-list="false" :on-success="handleAvatarSuccess1"
                                    :before-upload="beforeAvatarUpload">
                                    <img v-if="form.sharePictures" :src="form.sharePictures" class="avatar" />
                                    <el-icon v-else class="avatar-uploader-icon">
                                        <Plus />
                                    </el-icon>
                                </el-upload>
                            </el-form-item>
                        </el-form>
                    </div>
                </el-main>
                <el-footer>
                    <div style="text-align: center;">
                        <el-button type="primary" @click="UpdateProduct">保存</el-button>
                        <el-button>取消</el-button>
                    </div>

                </el-footer>
            </el-container>
        </el-container>
    </div>
</template>
<script lang="ts" setup>
import { onMounted, reactive } from 'vue'
import { ref } from 'vue'
import { Plus } from '@element-plus/icons-vue'
import { ElMessage, type UploadProps, type UploadUserFile } from 'element-plus'
import { UpdatefindProduct, getProduct } from '@/api/index'
import router from '@/router'
import { useRoute } from 'vue-router'
const route = useRoute()
//#region 上传图片
const handleAvatarSuccess: UploadProps['onSuccess'] = (
    response,
    uploadFile
) => {
    form.productPicture = URL.createObjectURL(uploadFile.raw!)

}
const handleAvatarSuccess1: UploadProps['onSuccess'] = (
    response,
    uploadFile
) => {

    form.sharePictures = URL.createObjectURL(uploadFile.raw!)
}
const beforeAvatarUpload: UploadProps['beforeUpload'] = (rawFile) => {
    if (rawFile.type !== 'image/jpeg') {
        ElMessage.error('图片必须是JPG格式!')
        return false
    } else if (rawFile.size / 1024 / 1024 > 2) {
        ElMessage.error('图片大小不能超过2MB!')
        return false
    }
    return true
}
//#endregion

// 数据
const form = reactive({
    id: route.query.id,
    productName: "",
    productPicture: "",
    productLabel: "",
    productProfile: "",
    sellingPrice: "",
    shareTitle: "",
    shareDescription: "",
    sharePictures: "",
    commodityType: "",
    commodityStatus: true,
    sort: "",
    surplusStock: "",
    originalprice: "10"
})
const Pdata = reactive({
    discount: '大沙发',
    favorable: '大丰收的',
    restrict: '打法撒旦',
    gift: '三大法师',
    noticethat: '发撒的',
    timelimit: '打发斯蒂芬',
    date: '大发大师傅打发打发打发手打',
    time: '的撒的',
    appointment: '大是非得失',
    rule: '的发达',
    listing: '大事发生',
    delist: '打撒大大',
    Drawdown: '打发点是的',
    coupon: '的撒的啊',
    placard: '大事发生d',
    phone: '大方',
    reserve: '士大夫as'
}) 
//根据Id查询
const getProducts = () => {
    getProduct(route.query.id).then(res => {
        form.productName = res.data.productName,
            form.productPicture = res.data.productPicture,
            form.productLabel = res.data.productLabel,
            form.productProfile = res.data.productProfile,
            form.sellingPrice = res.data.sellingPrice,
            form.shareTitle = res.data.shareTitle,
            form.shareDescription = res.data.shareDescription,
            form.sharePictures = res.data.sharePictures,
            form.commodityType = res.data.commodityType,
            form.commodityStatus = res.data.commodityStatus,
            form.sort = res.data.sort,
            form.surplusStock = res.data.surplusStock
    })
}
//修改
const UpdateProduct = () => {
    console.log(form)
    UpdatefindProduct(form).then((res: any) => {
        console.log(res)
        if (res.code == 200) {
            ElMessage.success("更新成功")
            router.push("/Commodity")
        }
        else {
            ElMessage.error("更新失败")
        }
    })
}
onMounted(() => {
    getProducts()
})
</script>
<style scoped>
.avatar-uploader .avatar {
    width: 178px;
    height: 178px;
    display: block;
}
</style>

<style>
.avatar-uploader .el-upload {
    border: 1px dashed var(--el-border-color);
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
    transition: var(--el-transition-duration-fast);
}

.avatar-uploader .el-upload:hover {
    border-color: var(--el-color-primary);
}

.el-icon.avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 178px;
    height: 178px;
    text-align: center;
}
</style>